<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模态框</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>
<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            模态框
                        </div>
                        <div class="panel-body">
                            <p>
                                模态框大小
                            </p>
                            <p>
                                <button class="btn btn-default" data-target="#m-default"
                                    data-toggle="modal">默认形式</button>
                                <button class="btn btn-default" data-target="#m-big" data-toggle="modal">大尺寸</button>
                                <button class="btn btn-default" data-target="#m-small" data-toggle="modal">小尺寸</button>
                            </p>
                            <p>
                                模态框显示位置
                            </p>
                            <p>
                                <button class="btn btn-default" data-target="#m-top" data-toggle="modal">顶部显示</button>
                                <button class="btn btn-default" data-target="#m-center"
                                    data-toggle="modal">居中显示</button>
                                <button class="btn btn-default" data-target="#m-bottom"
                                    data-toggle="modal">底部显示</button>
                                <button class="btn btn-default" data-target="#m-right" data-toggle="modal">右侧显示</button>
                                <button class="btn btn-default" data-target="#m-left" data-toggle="modal">左侧显示</button>
                            </p>
                            <p>
                                模态框显示样式
                            </p>
                            <p>
                                <button class="btn btn-primary" data-target="#m-primary"
                                    data-toggle="modal">重要模态框</button>
                                <button class="btn btn-info" data-target="#m-info" data-toggle="modal">信息模态框</button>
                                <button class="btn btn-success" data-target="#m-success"
                                    data-toggle="modal">成功模态框</button>
                                <button class="btn btn-warning" data-target="#m-warning"
                                    data-toggle="modal">警告模态框</button>
                                <button class="btn btn-danger" data-target="#m-danger"
                                    data-toggle="modal">危险模态框</button>

                            </p>
                            <p>
                                模态框组合
                            </p>
                            <p>
                                <button class="btn btn-default" data-target="#m-tab" data-toggle="modal">选项卡组合</button>
                                <button class="btn btn-default" data-target="#m-table" data-toggle="modal">表格组合</button>
                                <button class="btn btn-default" data-target="#m-form" data-toggle="modal">表单组合</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="m-default">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="m-form">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3 control-label">帐号：</label>
                            <div class="col-md-8">
                                <input class="form-control" placeholder="请输入帐号" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">登录密码：</label>
                            <div class="col-md-8">
                                <input class="form-control" placeholder="请输入登录密码" type="password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">确认密码：</label>
                            <div class="col-md-8">
                                <input class="form-control" placeholder="请输入确认密码" type="password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">性别：</label>
                            <div class="col-md-8">
                                <div class="radio-inline">
                                    <label>
                                        <input type="radio" name="gender" checked>男生
                                    </label>
                                </div>
                                <div class="radio-inline">
                                    <label>
                                        <input type="radio" name="gender">女生
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="m-table">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <table class="table table-strip">
                    <thead>
                        <tr>

                            <th>序号</th>
                            <th>帐号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身高</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>帐号</t>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>身高</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>帐号</t>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>身高</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>帐号</t>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>身高</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>帐号</t>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>身高</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>帐号</t>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>身高</td>
                        </tr>
                    </tbody>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-primary">
        <div class="modal-dialog modal-primary">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-info">
        <div class="modal-dialog modal-info">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-info">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-success">
        <div class="modal-dialog modal-success">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-danger">
        <div class="modal-dialog modal-danger">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-warning">
        <div class="modal-dialog modal-warning">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-warning">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-tab">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="nav-tabs-card ">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab61" data-toggle="tab">首页</a></li>
                        <li><a href="#tab62" data-toggle="tab">新闻</a></li>
                        <li><a href="#tab63" data-toggle="tab">赞助</a></li>
                        <li><a href="#tab64" data-toggle="tab">任务</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab61">
                            <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
                                沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
                            </p>
                            <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
                                沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
                            </p>
                        </div>
                        <div class="tab-pane" id="tab62">
                            <p>路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
                            </p>
                        </div>
                        <div class="tab-pane" id="tab63">
                            <p>曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
                            </p>
                        </div>
                        <div class="tab-pane" id="tab64">
                            <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-big">
        <div class="modal-dialog modal-lg">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-small">
        <div class="modal-dialog modal-sm">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-top">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-center">
        <div class="modal-dialog modal-center">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-bottom">
        <div class="modal-dialog modal-bottom">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-right">
        <div class="modal-dialog modal-right modal-sm ">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-block">确定</button>
                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade " id="m-left">
        <div class="modal-dialog modal-left modal-sm ">
            <div class="modal-content ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <div class="modal-title">标题</div>
                </div>
                <div class="modal-body">
                    这里是模态框组件演示中心，请大家仔细看哦。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-block">确定</button>
                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>


</body>

</html>